<template>
	<view>
		<scroll-view class="scrollList" scroll-y>
			<form>
				<view class="allsearchblock">
					<view class="rowone">
						<view class="searchblock">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="agentOrderId" type="text" placeholder='订单号' />
						</view>
					</view>
					<view class="rowone">
						<view class="searchblock">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="alitripOrderId" type="text" placeholder='同程订单号' />
						</view>
					</view>
					<view class="rowtwo">
						<view class="searchblock" style="margin-right: 8px;">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="contactMobile" type="text" placeholder='乘客手机号' />
						</view>
						<!-- <view style="padding: 0 8px;color: #cccccc;line-height: 36px;">
					</view> -->
						<view class="searchblock" style="margin-left: 8px;">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="contactName" type="text" placeholder='乘客姓名' />
						</view>
					</view>
					<view class="rowtwo">
						<view class="searchblock">
							<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
							<view v-if="startAgentCreatTime==''" class="theplaceholder" hover-class="theplaceholder-hover" @click="open(1)">
								下单起始日期
							</view>
							<view v-else class="my-input" @click="open(1)" hover-class="my-input-hover">
								{{startAgentCreatTime}}
							</view>
						</view>
						<view style="width: 16px;color: #cccccc;line-height: 36px;text-align: center;">
							-
						</view>
						<view class="searchblock">
							<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
							<view v-if="toAgentCreateTime==''" class="theplaceholder" hover-class="theplaceholder-hover" @click="open(2)">
								下单结束日期
							</view>
							<view v-else class="my-input" @click="open(2)" hover-class="my-input-hover">
								{{toAgentCreateTime}}
							</view>
						</view>
					</view>
					<view class="rowtwo">
						<view class="searchblock">
							<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
							<view v-if="startFromDate==''" class="theplaceholder" hover-class="theplaceholder-hover" @click="open(3)">
								出行起始日期
							</view>
							<view v-else class="my-input" @click="open(3)" hover-class="my-input-hover">
								{{startFromDate}}
							</view>
						</view>
						<view style="width: 16px;color: #cccccc;line-height: 36px;text-align: center;">
							-
						</view>
						<view class="searchblock">
							<img class="searchicon" src="../../../static/icon/carcalendaricon.png" />
							<view v-if="toFromDate==''" class="theplaceholder" hover-class="theplaceholder-hover" @click="open(4)">
								出行结束日期
							</view>
							<view v-else class="my-input" @click="open(4)" hover-class="my-input-hover">
								{{toFromDate}}
							</view>
						</view>
					</view>
					<view class="rowtwo">
						<view class="searchblock" style="margin-right: 8px;">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="fromCityName" type="text" placeholder='出发城市' />
						</view>
						<view class="searchblock" style="margin-left: 8px;">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="fromStationName" type="text" placeholder='出发站点' />
						</view>
					</view>
					<view class="rowtwo">
						<view class="searchblock" style="margin-right: 8px;">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="toCityName" type="text" placeholder='到达城市' />
						</view>
						<view class="searchblock" style="margin-left: 8px;">
							<img class="searchicon" src="../../../static/icon/searchicon.png" />
							<input class="my-input" v-model="toStationName" type="text" placeholder='到达站点' />
						</view>
					</view>
					<view class="btnbox">
						<button class="resetbtn" @click="reset()">
							重置
						</button>
						<button class="searchbtn" @click="init()">
							搜索
						</button>
					</view>
				</view>
				<view class="uni-list">
					<view v-if="orderDatas.length > 0">
						<block v-for="(orderData, key) in orderDatas" :key="key">
							<view class="uni-list-cell-padding">
								<view class="uni-list-cell-card" :class="{'refund':orderData.status=='订单关闭'||orderData.status=='订单取消'||orderData.status=='订单退票'}"
								 hover-class="uni-list-cell-hover" @click="orderDetail(orderData)">
									<view class="firstRow">
										<view class="fromto">
											<view style="display: inline;">{{orderData.fromStationName}}</view>
											<img style="height: 12px;width: 12px;margin: 0 4px;" src="../../../static/icon/arrow.png"></img>
											<view style="display: inline;">{{orderData.toStationName}}</view>
										</view>
										<view class="status">{{orderData.status}}</view>
									</view>
									<view class="secondRow">
										<view>
											<view>{{orderData.departTime}} 出发</view>
											<view class="thirdRow">
												<view style="margin-right: 4px;">{{orderData.contactName}}</view>
												<view>{{orderData.contactMobile}}</view>
											</view>
										</view>
										<view style="display: flex;flex-direction: row;color: #666666;font-weight: bold;align-items: center;">
											<view style="font-size: 12px;">￥</view>
											<view style="font-size: 18px;">{{orderData.orderPrice}}</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<view v-else class="uni-list-cell-padding">
						<view class="uni-list-cell-card-none">
							暂无数据
						</view>
					</view>
					<uni-pagination v-if="orderDatas.length>0" :show-icon="true" :total="total" :pageSize="pageSize" @change="init"
					 title="标题文字" />
				</view>
			</form>
		</scroll-view>
		<view v-if="showCalendar" class="calendar-mask" @click="closeMask">

		</view>
		<view class="calendar-box" @click.stop="" :class="{'calendar-box-show':showCalendar}">
			<uni-calendar :lunar="tags[0].checked" :fixed-heihgt="tags[1].checked" :slide="slide" :disable-before="tags[6].checked"
			 :start-date="startDate" :end-date="endDate" :date="date" @change="change" @to-click="toClick" />
			<!-- <view class="calendar-button-groups">
				<button class="calendar-button-confirm" @click="closeMask">取消</button>
				<button class="calendar-button-confirm" @click="confirm">确认</button>
			</view> -->
		</view>

	</view>
</template>

<script>
	import MyNavBar from '@/components/my-nav-bar.vue';
	var Util = require('@/components/util.js');
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import uniPagination from '@/components/uni-pagination.vue';

	export default {
		data() {
			function getDate(date, AddDayCount = 0) {
				if (typeof date !== 'object') {
					date = date.replace(/-/g, '/')
				}
				let dd = new Date(date)
				dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
				let y = dd.getFullYear()
				let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
				let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
				return y + '-' + m + '-' + d
			}
			let tags = [{
					id: 0,
					name: '农历',
					checked: false,
					attr: 'lunar'
				},
				{
					id: 1,
					name: '固定高度',
					checked: false,
					attr: 'fixedHeihgt'
				},
				{
					id: 2,
					name: '垂直滚动',
					checked: false,
					attr: 'vertical'
				},
				{
					id: 3,
					name: '水平滚动',
					checked: false,
					attr: 'horizontal'
				},
				{
					id: 4,
					name: '开始日期(' + getDate(new Date(), -1) + ')',
					checked: false,
					value: getDate(new Date(), -1),
					attr: 'startDate'
				},
				{
					id: 5,
					name: '结束日期(' + getDate(new Date(), 2) + ')',
					value: getDate(new Date(), 2),
					checked: false,
					attr: 'endDate'
				},
				{
					id: 6,
					name: '禁用今天之前的日期',
					checked: false,
					attr: 'disableBefore'
				},
				{
					id: 7,
					name: '自定义当前日期(' + getDate(new Date(), 1) + ')',
					value: getDate(new Date(), 1),
					checked: false,
					attr: 'date'
				}
			]
			return {
				showCalendar: false,
				show: false, //日历
				slide: 'none',
				date: '',
				startDate: '',
				endDate: '',
				tags,
				index: '', //判断是选择起始日期还是结束日期
				//以上日历相关参数

				agentOrderId: '',
				alitripOrderId: '',
				contactName: '',
				contactMobile: '',
				startAgentCreatTime: '', // 起始创建日期
				toAgentCreateTime: '', // 终止创建日期
				startFromDate: '', // 起始出发日期
				toFromDate: '', // 终止出发日期
				fromCityName: '', // 起始城市名
				fromStationName: '', // 起始站点名
				toStationName: '', // 到达站点名
				toCityName: '',
				orderDatas: [], // 全部订单数据
				total: 0,
				pageSize: 100, // 每页多少条
				orderData: {}, // 一条订单数据
			}
		},
		components: {
			MyNavBar,
			uniCalendar,
			uniPagination
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(page = 1) {
				let self = this;
				this.orderDatas=''; // 每次请求先清空数据，可以返回顶部
				// setTimeout(() => window.scrollTo(0,0), 150)
				let postData = ({
					page: page,
					type: 1,
					agentOrderId: self.agentOrderId,
					alitripOrderId: self.alitripOrderId,
					contactName: self.contactName,
					contactMobile: self.contactMobile,
					startAgentCreatTime: self.startAgentCreatTime, // 起始创建日期
					toAgentCreateTime: self.toAgentCreateTime, // 终止创建日期
					startFromDate: self.startFromDate, // 起始出发日期
					toFromDate: self.toFromDate, // 终止出发日期
					fromCityName: self.fromCityName, // 起始城市名
					fromStationName: self.fromStationName, // 起始站点名
					toStationName: self.toStationName, // 到达站点名
					toCityName: self.toCityName // 到达城市名}
				});
				uni.request({
					url: this.websiteUrl + "/api/order/findOrderAllByDetail",
					method: "POST",
					headers: {
						'content-Type': 'application/json;charset=UTF-8'
					},
					data: postData,
					success: (res) => {
						if (res.data.success) {
							self.orderDatas = res.data.obj.list;
							self.total = res.data.obj.total;
							self.orderDatas.forEach((e) => {
								if (e.status == 1) {
									e.status = '等待付款';
								}
								if (e.status == 2) {
									e.status = '等待出票';
								}
								if (e.status == 3) {
									e.status = '出票成功';
								}
								if (e.status == 4) {
									e.status = '订单关闭';
								}
								if (e.status == 5) {
									e.status = '订单取消';
								}
								if (e.status == 9) {
									e.status = '订单退票';
								}
								e.departTime = Util.dateDayFormat(e.departTime);
								if (e.refundPrice == null) {
									e.refundPrice = 0;
								}

							})
							uni.stopPullDownRefresh(); //关掉刷新图标
							uni.hideLoading(); //隐藏加载图标
							this.showNum = true; //显示搜索条数
						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					}
				});
			},
			orderDetail(e) {
				uni.navigateTo({
					url: 'orderDetail?id=' + e.id
				})
			},

			// 重置
			reset() {
				this.agentOrderId = '';
				this.alitripOrderId = '';
				this.contactName = '';
				this.contactMobile = '';
				this.startAgentCreatTime = ''; // 起始创建日期
				this.toAgentCreateTime = ''; // 终止创建日期
				this.startFromDate = ''; // 起始出发日期
				this.toFromDate = ''; // 终止出发日期
				this.fromCityName = ''; // 起始城市名
				this.fromStationName = ''; // 起始站点名
				this.toStationName = ''; // 到达站点名
				this.toCityName = ''; // 到达城市名}
				this.init();
			},

			//日历
			toggle(index, item) {
				this.tags[index].checked = !item.checked
				// item.checked = !item.checked;
				console.log(index)
				if (index === 2) {
					this.tags[3].checked = false
				}
				if (index === 3) {
					this.tags[2].checked = false
				}
				// this.attribute[item.attr] = !item.checked;
			},
			open(index) {
				if (this.tags[3].checked) {
					this.slide = 'horizontal'
				} else if (this.tags[2].checked) {
					this.slide = 'vertical'
				} else {
					this.slide = 'none'
				}
				if (this.tags[4].checked) {
					this.startDate = this.tags[4].value
				} else {
					this.startDate = ''
				}
				if (this.tags[5].checked) {
					this.endDate = this.tags[5].value
				} else {
					this.endDate = ''
				}
				if (this.tags[7].checked) {
					this.date = this.tags[7].value
				} else {
					this.date = ''
				}
				// this.show = true
				// setTimeout(() => {
				this.showCalendar = true;
				// }, 10000);
				this.index = index
			},
			closeMask() {
				this.showCalendar = false
			},
			change(e) {
				console.log('change 返回:', e.fulldate)
				this.timeData = e
			},
			toClick(e) {
				console.log('点击事件', e.fulldate)
				if (this.index == 1) { //订单创建起始日期
					this.startAgentCreatTime = e.fulldate;
				}
				if (this.index == 2) { //订单创建结束日期
					this.toAgentCreateTime = e.fulldate;
				}
				if (this.index == 3) { //出行起始日期
					this.startFromDate = e.fulldate;
				}
				if (this.index == 4) { //出行结束日期
					this.toFromDate = e.fulldate;
				}
				this.showCalendar = false
			},
			confirm(e) {
				this.showCalendar = false
			}
		}
	}
</script>

<style lang="less">
	.allsearchblock {
		margin: 8px;
		border-radius: 4px;
		padding: 8px 0;
		background-color: #FFFFFF;
		height: 800px;

		.rowone {
			padding: 8px 16px;
			background-color: #FFFFFF;

			.searchblock {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				height: 36px;
				align-items: center;
				background-color: #f4f5f6;
				border-radius: 4px;
				flex: 2;
				padding: 8px 6px;

				.searchicon {
					width: 48upx;
					height: 48upx;
					margin-right: 6px;
				}

				.my-input {
					flex: 1;
					font-size: 14px;
					height: 32px;
					line-height: 32px;
					color: #333333
				}
			}
		}

		.rowtwo {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			background-color: #FFFFFF;
			padding: 8px 16px;

			.searchblock {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				height: 36px;
				align-items: center;
				background-color: #f4f5f6;
				border-radius: 4px;
				flex: 2;
				padding: 0 6px;

				.searchicon {
					width: 48upx;
					height: 48upx;
					margin-right: 6px;
				}

				.theplaceholder {
					flex: 1;
					font-size: 14px;
					height: 32px;
					line-height: 32px;
					color: #999999;

				}

				.theplaceholder-hover {
					color: #d9d9d9;
				}

				.my-input {
					flex: 1;
					font-size: 14px;
					height: 32px;
					line-height: 32px;
					color: #333333;
				}

				.my-input-hover {
					color: #b3b3b3
				}
			}
		}

		.btnbox {
			padding: 8px 16px;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;

			.resetbtn {
				background-color: #e5f5ff;
				color: #11A0F8;
				height: 36px;
				line-height: 36px;
				font-size: 16px;
				flex: 1;
				border-radius: 4px 0 0 4px;
			}

			.searchbtn {
				background-color: #11A0F8;
				color: #FFFFFF;
				height: 36px;
				line-height: 36px;
				font-size: 16px;
				flex: 1;
				border-radius: 0 4px 4px 0;
			}
		}
	}

	.uni-list {
		background-color: #f4f5f6;
		padding: 4px 0;
	}

	.uni-list::before {
		display: none;
	}

	.uni-list::after {
		display: none;
	}

	.uni-list-cell-padding {
		padding: 4px 8px;
	}

	.uni-list-cell-card {
		background-color: #FFFFFF;
		border-radius: 4px;
		padding: 12px 16px;
		font-size: 14px;
		color: #333333;
		align-items: center;

		.firstRow {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			line-height: 24px;
			padding-bottom: 6px;

			.fromto {
				// display: flex;
				// flex-direction: row;
				align-items: center;
				font-size: 16px;
				padding-right: 16px;
				font-weight: bold;
			}

			.status {
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #11A0F8;
				align-self: flex-start;
			}
		}

		.secondRow {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 13px;
			line-height: 20px;
			color: #999999;

			.thirdRow {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 13px;
				line-height: 20px;
				color: #999999;
			}
		}
	}

	.uni-list-cell-card-none {
		border-radius: 4px;
		font-size: 16px;
		display: flex;
		flex-direction: row;
		height: 48px;
		line-height: 48px;
		padding: 0 12px;
		font-size: 14px;
		color: #999999;
		align-items: center;
		justify-content: center;
	}


	.subtitle-padding {
		padding: 12px 8px 4px;
	}

	.subtitle-card {
		height: 36px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		font-size: 12px;
		color: #999;
		padding: 0 12px;
		border-radius: 4px;
	}

	.scrollList {
		flex: 1;
		height: 100vh;
	}

	/* 无白底的 */
	.my-list-cells {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0upx 48upx 0upx 20upx;
		font-size: 28upx;
		color: #333333;
		background-color: #f4f5f6;
	}

	.my-list-cell-out {
		width: 33.3333%;
		text-align: center;
		padding: 10upx;
	}

	.my-list-cell-in {
		border-radius: 8upx;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		position: relative;
	}

	/* 让右边小标题上下居中 */
	.theheight {
		position: fixed;
		z-index: 10;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
	}

	.uni-indexed-list-bar {
		width: 48upx;
		height: 100vh;
		/* background-color: #FFFFFF; */
		display: flex;
		flex-direction: column;

	}

	.uni-indexed-list-text {
		color: #999;
		font-size: 22upx;
		text-align: center;
	}

	.uni-indexed-list-bar.active .uni-indexed-list-text {
		color: #333;
	}

	.uni-indexed-list-text.active,
	.uni-indexed-list-bar.active .uni-indexed-list-text.active {
		color: #11A0F8;
	}

	.uni-indexed-list-alert {
		position: absolute;
		z-index: 20;
		width: 160upx;
		height: 160upx;
		left: 50%;
		top: 50%;
		margin-left: -80upx;
		margin-top: -80upx;
		border-radius: 80upx;
		text-align: center;
		line-height: 160upx;
		font-size: 70upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.uni-list-cell-fixed {
		display: flex;
		font-size: 28upx;
		line-height: 32upx;
		color: #999;
		background-color: red;
		padding: 16upx 30upx;
		width: 100%;
	}

	// 退票样式
	.refund {
		color: #cccccc !important;

		view {
			color: #cccccc !important;
		}
	}

	/* 居中弹窗 */
	.popuptitle {
		font-weight: bold;
		margin: 40upx;
	}

	.popupexplain {
		font-size: 28upx;
		margin: 40upx;
		line-height: 36upx;
	}

	.popupbtmbutton {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background-color: #FFFFFF;
		border-radius: 0upx;
	}

	.popuptwobutton {
		display: flex;
		flex-direction: row;
		font-size: 36upx;
		color: #11a0f8;
		width: 100%;
		height: 100upx;
		align-items: center;
		position: relative;
	}

	.popupbutton {
		flex: 1;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.popuptwobutton::before {
		position: absolute;
		z-index: 10;
		right: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #e5e5e5;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.popuptwobutton::after {
		position: absolute;
		z-index: 10;
		right: 50%;
		top: 0;
		width: 1px;
		height: 100%;
		content: '';
		-webkit-transform: scaleX(.5);
		transform: scaleX(.5);
		background-color: #e5e5e5;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.calendar-mask {
		position: fixed;
		/* #ifdef H5 */
		top: 45px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		bottom: 0;
		display: flex;
		align-items: center;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 100;
	}

	.calendar-box {
		/* margin: 20upx; */
		/* border-radius: 10upx; */
		width: 100%;
		overflow: hidden;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.calendar-box-show {
		transform: translateY(0);
	}

	.calendar-button-groups {
		position: absolute;
		width: 100%;
		bottom: 0;
		display: flex;
	}

	.calendar-button-confirm {
		width: 50%;
		margin: 10upx;
		border: 1px #eee solid;
		font-size: 32upx;
	}

	.calendar-button-confirm:after {
		border: none;
	}
</style>
